<template>
  <div class="customer-form">
    <el-form :model="formData" ref="form" label-width="120px">
      <!-- 基础信息 -->
      <h3 class="form-section">基础信息</h3>
      <el-row>
        <el-col :span="8">
          <el-form-item label="客户编码" required>
            <el-input v-model="code" style="width: 243px"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户名称" required>
            <el-input v-model="name" style="width: 243px"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="所属行业">
            <el-cascader
              v-model="industry"
              :options="industryOptions"
              placeholder="请选择行业"
              expand-trigger="hover"
              style="width: 243px"
            ></el-cascader>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="客户级别">
            <el-select
              v-model="level"
              placeholder="请选择客户级别"
              style="width: 243px"
            >
              <el-option label="普通客户" value="normal"></el-option>
              <el-option label="VIP客户" value="vip"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户标签">
            <el-select v-model="tags" multiple placeholder="请选择客户标签">
              <el-option label="重要客户" value="important"></el-option>
              <el-option label="潜在客户" value="potential"></el-option>
              <el-option label="长期客户" value="long-term"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="区域">
            <el-cascader
              v-model="area"
              :options="areaOptions"
              placeholder="请选择区域"
              expand-trigger="hover"
              style="width: 243px"
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司地址">
            <el-input v-model="address"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="邮编">
            <el-input v-model="zip"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注信息">
            <el-input v-model="remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="客户状态">
            <el-switch
              v-model="status"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
              <template #open>启用</template>
              <template #close>禁用</template>
            </el-switch>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 联系人信息 -->
      <h3 class="form-section">联系人信息</h3>
      <el-row>
        <el-col :span="8">
          <el-form-item label="姓名">
            <el-input v-model="contactName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="手机号码">
            <el-input v-model="contactMobile"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="部门">
            <el-input v-model="contactDepartment"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="职位">
            <el-input v-model="contactPosition"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="E-mail">
            <el-input v-model="contactEmail"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="QQ">
            <el-input v-model="contactQQ"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 财务信息 -->
      <h3 class="form-section">财务信息</h3>
      <el-row>
        <el-col :span="8">
          <el-form-item label="发票抬头">
            <el-input v-model="invoiceTitle"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="纳税人识别号">
            <el-input v-model="taxId"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="开户行">
            <el-input v-model="bank"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="开户名称">
            <el-input v-model="accountName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="银行账号">
            <el-input v-model="accountNumber"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 操作按钮 -->
      <div class="form-btns">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submit">保存</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";

export default {
  setup() {
    const formData = reactive({
      // 基础信息
      code: "",
      name: "",
      industry: [],
      level: "",
      tags: [],
      area: [],
      address: "",
      zip: "",
      remark: "",
      status: false,

      // 联系人信息
      contactName: "",
      contactMobile: "",
      contactDepartment: "",
      contactPosition: "",
      contactEmail: "",
      contactQQ: "",

      // 财务信息
      invoiceTitle: "",
      taxId: "",
      bank: "",
      accountName: "",
      accountNumber: "",
    });

    const industryOptions = ref([
      {
        value: "commerce",
        label: "商业",
        children: [
          {
            value: "retail",
            label: "零售业",
          },
          {
            value: "wholesale",
            label: "批发业",
          },
          {
            value: "e-commerce",
            label: "电子商务",
          },
        ],
      },
      {
        value: "manufacturing",
        label: "制造业",
        children: [
          {
            value: "automotive",
            label: "汽车制造",
          },
          {
            value: "electronics",
            label: "电子制造",
          },
          {
            value: "furniture",
            label: "家具制造",
          },
        ],
      },
      {
        value: "services",
        label: "服务业",
        children: [
          {
            value: "consulting",
            label: "咨询服务",
          },
          {
            value: "education",
            label: "教育培训",
          },
          {
            value: "repair",
            label: "维修服务",
          },
        ],
      },
    ]);

    const areaOptions = ref([
      {
        value: "east",
        label: "东部地区",
        children: [
          {
            value: "shanghai",
            label: "上海",
          },
          {
            value: "jiangsu",
            label: "江苏",
            children: [
              {
                value: "nanjing",
                label: "南京",
              },
              {
                value: "suzhou",
                label: "苏州",
              },
            ],
          },
        ],
      },
      {
        value: "south",
        label: "南部地区",
        children: [
          {
            value: "guangdong",
            label: "广东",
          },
          {
            value: "fujian",
            label: "福建",
            children: [
              {
                value: "fuzhou",
                label: "福州",
              },
              {
                value: "xiamen",
                label: "厦门",
              },
            ],
          },
        ],
      },
    ]);

    const router = useRouter();

    const created = () => {
      // 模拟获取要编辑的数据
      const id = router.params.id;
      console.log("获取ID为", id, "的客户数据");

      // 模拟填充表单数据
      formData.code = "C0001";
      formData.name = "某某客户";
      formData.industry = ["commerce", "retail"];
      formData.level = "vip";
      formData.tags = ["long-term"];
      formData.area = ["east", "jiangsu", "suzhou"];
      formData.address = "某某地址";
      formData.zip = "100000";
      formData.remark = "备注信息";
      formData.status = true;

      formData.contactName = "张三";
      formData.contactMobile = "13812345678";
      formData.contactDepartment = "客户部";
      formData.contactPosition = "经理";
      formData.contactEmail = "zhangsan@example.com";
      formData.contactQQ = "12345678";

      formData.invoiceTitle = "某某公司";
      formData.taxId = "1234567890";
      formData.bank = "某某银行";
      formData.accountName = "某某公司";
      formData.accountNumber = "1234567890";
    };

    const submit = () => {
      // 更新表单数据的逻辑
      console.log("更新客户数据", formData);

      this.$refs.form.validate((valid) => {
        if (valid) {
          // 模拟将表单数据提交到 API 进行更新
          console.log("提交更新请求");
        }
      });
    };

    const cancel = () => {
      // 取消操作的逻辑
      console.log("取消操作");
      router.go(-1);
    };

    return {
      formData,
      created,
      submit,
      cancel,
      industryOptions,
      areaOptions,
    };
  },
};
</script>

<style>
.customer-form {
  background-color: #ffffff;
  display: inline-block;
  line-height: 40px;
}

.form-section {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 16px;
  margin-right: 950px;
}

.form-btns {
  /*margin-top: 16px;*/
  padding: 28px 0px;
  text-align: right;
  width: 1089px;
  height: 72px;
  display: inline-block;
  background-color: white;
  /*border:1px solid red;*/
  position: fixed;
  top: 844px;
  left: 400px;
}
</style>
